<template>
    <div id="body-padding">
        <!--<p id="p">fans</p>-->
        <div id="fen">
            <a 
               :style="show1?style:''" 
               @click="show1=true,box='leftin'"                
            >我关注的</a>
            <a 
               :style="show1?'':style" 
               @click="show1=false,box='rightin'"                
            >关注我的</a>
        </div>
        <transition-group :name="box">
            <div key='1'  v-show="show1"  class="in">
                <router-link :to="'/new/day/'+i._id" v-for="(i,a) in info" class="info" key='a'>
                    <img :src="'http://localhost:3000'+i.avatar" alt="">
                    <span>{{i.name}}</span>
                </router-link>
            </div>
            <div key="2" v-show="!show1" class="in">
                <router-link :to="'/new/day/'+i._id"  v-for="(i,a) in fans" class="info" key='a'>
                    <img :src="'http://localhost:3000'+i.avatar" alt="">
                    <span>{{i.name}}</span>
                </router-link>
            </div>
        </transition-group>
    </div>
</template>

<script>

export default {
    data(){
        return{
            info:[],
            fans:[],
            show1:true,
            show2:false,
            box:"",
            style:{
                'border': "solid 1px #61BAC0",
                'background-color': '#61BAC0',
                'color': 'white',
            }
        }
    },
    methods:{
        mount(){
            this.http.get("/users/fen")
            .then(res=>{
                if(res.data.err==5){
                    this.layer.msg("请先登录");
                    return;
                }
                // 我关注的
                this.info=res.data.data.info;
                // 关注我的
                this.fans=res.data.data.fans;
            })
        }
    },
    activated(){
        this.mount();
        this.$store.dispatch("word");
    }
}
</script>

<style scoped>
#fen{
    display: flex;
    justify-content: center;
}
#fen a{
    border: solid 1px #ccc;
    display: inline-block;
    width: 50%;
    text-align: center;
    padding: 6px;
}
#fen a:nth-of-type(1){
    border-right: none;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    
}
#fen a:nth-of-type(2){
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.in{
    height: 75vh;
    background-color: white;
    margin-top: 20px;
}
.info{
    display: inline-block;
    width: 100%;
    margin: 10px 0;
    background-color: #eee;
    border-radius: 8px;
    padding: 8px;
}
.info img{
    width: 42px;
    height: 42px;
    border-radius: 50%;
}
.info span{
    vertical-align: top;
    line-height: 45px;
    padding-left: 8px;
    color: blue;
}
</style>